var App = App||{};
App.init = function(){
	App.Project.init();
	App.ProjectStats.init();
};

App.ProjectStats = {};

App.ProjectStats.init = function(){
	var self = this;
	
	Highcharts.setOptions({
		credits: { enabled: false },
		colors: [ '#4572A7', '#AA4643', '#89A54E', '#80699B', '#3D96AE', '#DB843D', '#92A8CD', '#A47D7C', '#B5CA92', '#E0AB1A' ]
	});	
	
	$('#btnRefresh').button({ icons: { primary: 'ui-icon-refresh'} }).bind('click', $.proxy(this.Refresh, this));

	$('#projectPlaceholder').delegate('.project .remove-project', 'click', function(){ self.removeProject.call(self, $(this).closest('.project')); });
	
	this.initDrop();
	this.Refresh();	
};

App.ProjectStats.initDrop = function(){ $('#projectPlaceholder').droppable('destroy').droppable({ accept: ".project", activeClass: "drop-ready", hoverClass: "drop-hover", drop: $.proxy(this.projectDrop, this) }); };
App.ProjectStats.removeProject = function(el){ el.fadeOut('fast', function(){ $(this).data('projectId','0').html('drop project here').addClass('empty').fadeIn(); }); };

/**
 * Project is dropped on a day
 */
App.ProjectStats.projectDrop = function(ev, ui){
	var project = ui.draggable, projectId = project.data('projectId'), projectName = project[0].childNodes[1].textContent; 
	$(ev.target)
		.html('<div class="project" data-project-id="'+projectId+'"><div class="remove-project"></div>'+projectName+'</div>')
		.css('background','#95BDD4')
		.effect('pulsate', {times:1}, 400, function(){ $(this).css('background',''); });	
	this.initDrop();
	this.Refresh();
};


App.ProjectStats.Refresh = function(){
	var projectId = +$('#projectPlaceholder .project').data('projectId');
	if (!projectId) $('#chart0').hide();
	else {
		$('#chart0').show();
		$.ajax({ url: "projectActivity", context: this, data: { projectId: projectId } }).success(function(data){ this.activityChart('chart0', 'Project Activity', data); });	
	}
	$.ajax({ url: "mostActiveProjects", context: this }).success(function(data){ this.pieChart('chart1', 'Most active - last 30 days', data); });	
	$.ajax({ url: "mostHoursProjects", context: this }).success(function(data){ this.pieChart('chart2', 'Most hours - all times', data); });	
};



App.ProjectStats.pieChart = function(containerId, title, data){
	// [{name:'', hours: ''},...]   == >  [['name',   45.0],...]
	var i = 0, row, newData = [];
	for (; row = data[i++] ;) newData.push([ row.name, row.hours ]);
	
	var conf = {
		chart: { renderTo: containerId, margin: [0, 0, 0, 100], backgroundColor: null },
		title: { text: title },
		plotOptions: { pie: { borderWidth: 1, borderColor: '#DDDDDD', shadow: false,
				dataLabels: { enabled: true, distance: -40, color: '#fff', formatter: function(){ 
					return '<b>'+ this.point.name +'</b><br/>'+ this.y +'h (' + Highcharts.numberFormat(this.percentage,0) +'%)';
				} } 
		}},
		tooltip: { enabled: false, formatter: function() { return '<b>'+ this.point.name +'</b><br/>'+ this.y +'h (' + Highcharts.numberFormat(this.percentage,0) +'%)'; } },
		legend: { enabled: true, layout: 'vertical', align: 'left', y: 30, verticalAlign: 'top', lineHeight: 20, borderWidth: 0 },
		series: [{ type: 'pie', name: title, data: newData, showInLegend: true }]
	};
	new Highcharts.Chart(conf);
};


App.ProjectStats.activityChart = function(containerId, title, data){
	chart = new Highcharts.StockChart({
	    chart: { renderTo: containerId, backgroundColor: null },
	    rangeSelector: { selected: 1 },
	    title: { text: 'Project Activity: ' + data.name },
	    xAxis: { maxZoom: 14 * 24 * 3600000 },
	    yAxis: { title: null },
	    series: [{ name: 'Hours', data: data.chartData }]
	});	
};

